<template>
    <div class="teacherPlanQuery">
        <div class="TeachingPlanTop">
            <div class="planName">
                <p class="planNameText">年级：</p>
                <el-input
                v-model="planNameValue"
                placeholder="请输入课程名称"
                ></el-input>
            </div>
            <div class="school">
                <p>所属院校：</p>
                <el-select
                    v-model="saveForm.upResId"
                    clearable
                    placeholder="请选择"
                    @clear="handleClear"
                    ref="selectUpResId"
                >
                <el-option hidden :value="saveForm.upResId" :label="upResName">
                </el-option>
                <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                    @node-click="handleNodeClick"
                >
                </el-tree>
                </el-select>
            </div>
            <div class="major">
                <p>所属专业：</p>
                <el-select v-model="majorValue" placeholder="请选择所属专业">
                    <el-option
                        v-for="item in majorOptions"
                        :key="item.majorId"
                        :label="item.majorName"
                        :value="item.majorId"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="moreBtn">
                <el-button
                    type="primary"
                    @click="searchBtn"
                    class="searchBtn"
                    icon="el-icon-search"
                >查询</el-button>
                <el-button
                    type="primary"
                    @click="refreshBtn"
                    class="refreshBtn"
                    icon="el-icon-refresh"
                >重置</el-button>
            </div>
        </div>
        <div class="TeachingPlanBottom">
            <div class="operationBtns">
                <div class="setBtnsLeftTitle">
                    <p>管理列表</p>
                </div>
                <div class="setBtns">
                    <el-button
                        type="primary"
                        class="exportBtn"
                        @click="exportTeachingPlan"
                    >
                    <span class="icon iconfont icon-daochu"></span>
                        导出计划
                    </el-button>
                </div>
                </div>
                <div class="tableData">
                <el-table
                    ref="multipleTable1"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
                    :cell-style="cellStyle"
                    @selection-change="selectionChange"
                  >
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" type="index" width="50">
                    </el-table-column>
                    <el-table-column label="年级" prop="gradeExcelName">
                    </el-table-column>
                    <el-table-column label="学期" prop="semesterExcelName">
                    </el-table-column>
                    <el-table-column prop="planName" label="计划名称">
                    </el-table-column>
                    <el-table-column prop="colleageExcelName" label="所属院校">
                    </el-table-column>
                    <el-table-column prop="majorExcelName" label="所属专业">
                    </el-table-column>
                    <el-table-column prop="status" label="发布状态">

                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.status"
                          active-color="#13ce66"
                          inactive-color="#C2C2C2"
                          active-value="0"
                          inactive-value="1"
                          @change="changeSwitch(scope.row)"
                        >
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="班级" prop="classExcelName">
                    </el-table-column>
                    <el-table-column label="所授课程" prop="courseExcelName" >
                    </el-table-column>
                    <el-table-column label="计划课时" prop="totalLessonPeriod" >
                    </el-table-column>
                    <el-table-column label="周课时" prop="weekLessonPeriod">
                    </el-table-column>
                    <el-table-column label="周次" prop="weeks">
                    </el-table-column>


                    <el-table-column prop="address" label="操作" width="200">
                        <template slot-scope="scope">
                            <div class="haed">
                            <span @click="curriculumSelect(scope.row)"
                                >课程查看</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="selectDialog">
                    <el-dialog
                        title="课程查看"
                        :visible.sync="selectClassFlag"
                        width="900px"
                        height="800px"
                        >
                        <div class="selectClass">
                            <div class="searchClass">
                            <el-input
                                v-model="searchClassValue"
                                placeholder="请输入课程名称"
                                suffix-icon="el-icon-search"
                            ></el-input>
                            </div>
                        </div>
                        <div class="searchClassData">
                            <el-table
                            ref="multipleTable"
                            :data="selectClassData"
                            v-loading = "isLoading"
                            element-loading-text = "加载中，请稍后..."
                            tooltip-effect="dark"
                            style="width: 100%"
                            :header-cell-style="{
                                textAlign: 'center',
                                background: '#f3f8fc',
                            }"
                            :cell-style="{ textAlign: 'center' }"
                            @selection-change="handleSelectionChange"
                            >
                            <!-- <el-table-column type="selection" width="55">
                            </el-table-column> -->
                            <el-table-column label="序号" type="index" width="50">
                            </el-table-column>
                            <el-table-column prop="courseName" label="课程名称">
                            </el-table-column>
                            <el-table-column prop="courseTypeName" label="课程类型">
                            </el-table-column>
                            <el-table-column prop="instructionalVersion" label="课程版本">
                            </el-table-column>
                            </el-table>
                        </div>
                        <div class="block">
                            <el-pagination
                                @size-change="infoHandleSizeChange"
                                @current-change="infoHandleCurrentChange"
                                :current-page.sync="infoCurrentPage"
                                :page-size="10"
                                prev-text="上一页"
                                next-text="下一页"
                                layout="prev, pager, next, jumper"
                                ref="pagination"
                                :total="infoTotal"
                            >
                            </el-pagination>
                            <el-button class="sure" type="primary">确定</el-button>
                        </div>
                        <div slot="footer" class="dialog-footer">
                            <el-button class="cancel" @click="selectClassCancel">
                                取 消
                            </el-button>
                            <el-button
                                class="determine"
                                type="primary"
                                @click="selectClassBtn"
                            >确 定</el-button
                            >
                        </div>
                    </el-dialog>
                </div>
                <div class="block">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="10"
                        prev-text="上一页"
                        next-text="下一页"
                        layout="prev, pager, next, jumper"
                        ref="pagination"
                        :total="total"
                    >
                    </el-pagination>
                    <el-button class="sure" type="primary">确定</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import {
    colleageTreeDataApi,
    majorListApi,
    basicManagementListApi,
    // editTeachingPlanApi,
    teachingPlanCourseApi,
    teachingPlanExportApi,
    getSchoolYearApi,
    // getGradeListApi
    // exportBasicManagementApi
} from "@/api/basics/teachingPlan"
// import HOST from "@/global"
export default {
    name:"teacherPlanQuery",
    data() {
        return {
            planNameValue:'',  // 搜索计划名称
            // 所属院校
            saveForm:{
                upResId:'' // 院校id
            },
            upResName:'', //  所属院校名称
            // 树组件
            defaultProps: {
                children: "children",
                label: "label",
            },
            majorValue:'', //专业
            majorOptions:[], //搜索专业下拉数据
            treeData:[],  // 树组件数据
            tableData:[],  //  table数据
            currentPage:1, // 页码
            selectClassFlag:false, // 课程选择开关
            searchClassValue:'', //搜索课程名称
            selectClassData:[],  // 课程选择数据
            infoCurrentPage:1,  // 课程选择页码
            infoTotal:10, // 课程选择分页总数
            isLoading:false,
            filename:'教学计划表',
            total:0,
            schoolYearList:[],
            gradeList:[]
        }
    },
    mounted() {
        this.colleageTreeData()
        this.getManageementList()
        document.getElementsByClassName(
            "el-pagination__jump"
        )[0].childNodes[0].nodeValue = "跳到第";
        // this.exportTeachingPlan()
        // this.getSchoolYear()

        getSchoolYearApi().then(res=>{
            console.log(res);
            this.schoolYearList = res.rows
        })
        
    },
    methods:{
        // 分页  事件
        infoHandleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        infoHandleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        // this.tableList()
        },
        // 课程查看 checkbox事件
        handleSelectionChange() {},

        // 弹框区取消事件
        selectClassCancel() {
            this.selectClassFlag = false
        },
        // 弹框确定事件
        selectClassBtn() {
            this.selectClassFlag = false
        },

        // 课程选择
        async curriculumSelect(row) {
            this.selectClassFlag = true
            this.$nextTick(()=>{
                document.getElementsByClassName(
                    "el-pagination__jump"
                )[0].childNodes[0].nodeValue = "跳到第";
            })
            this.isLoading = true
            // 查询已选择课程接口   计划id   班级id
            const data = await teachingPlanCourseApi({teachingPlanId:row.planId})
            if(data.code === 200) {
                this.isLoading = false
            }
            this.selectClassData = data.rows

        },
        // 教学计划列表
        getManageementList(obj) {
            this.isLoading = true
            console.log(obj);
            // getGradeListApi({parentId:55}).then(res=>{
            //     console.log(res);
            //     this.gradeList = res.rows
            // })
            basicManagementListApi({...obj,status:'0',pageSize:'10', pageNum:this.currentPage}).then(res=>{
                if(res.code === 200) {
                    console.log(res);
                    this.isLoading = false
                    this.tableData = res.rows
                    this.total = res.total
                    // this.tableData = this.tableData.filter(item=>{
                    //     return item.status == '0'
                    // })
                    // res.rows.forEach(item => {
                    //     // console.log(item);
                    //     // console.log(this.gradeList);
                    //     this.gradeList.forEach(it=>{
                    //         console.log(it);
                    //         if(it.typeId == item.gradeTypeId) {
                    //             console.log(item);
                    //             item.gradeTypeNameText = it.gradeTypeName
                    //         }
                    //     })
                    // });
                }
            })
            
        },

        // 所属专业下拉框
        async collegesValueHandler(id) {
            const data = await majorListApi({ colleageId: id ,status:'0'});
            console.log(data,'---zhuanye');
            this.majorOptions = data.rows;
        },

        // 所属院校下拉框
        async colleageTreeData() {
            const data = await colleageTreeDataApi();
            this.treeData = data.data;
        },

        // 树节点事件
        handleNodeClick(data) {
            console.log(data);
            // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
            this.upResName = data.label;
            this.saveForm.upResId = data.id;
            // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
            this.$refs.selectUpResId.blur();
            this.collegesValueHandler(data.id)
        },

        // 清空select
        handleClear() {
        // 将选择器的值置空
            this.upResName = "";
            this.saveForm.upResIds = "";
        },

        // 搜索
        async searchBtn() {
            let obj = {
                colleageId:this.saveForm.upResId,
                majorId:this.majorValue,
                pageSize:'10',
                pageNum:this.currentPage
            }
            this.getManageementList(obj)
        },

        // 重置
        refreshBtn() {
            this.majorValue = ''
            this.upResName = ''
            this.saveForm.upResId = ''
            this.planNameValue = ''
            this.majorOptions = []
            this.getManageementList({pageSize:'10', pageNum:this.currentPage})
        },

        // 发布状态
        // changeSwitch(row) {
        //     editTeachingPlanApi({status:row.status,planId:row.planId})

        // },

        // 导出
        exportTeachingPlan() {
            // exportBasicManagementApi().then(res=>{
            //     const a = document.createElement("a"); //创建a标签
            //     a.href = `${HOST}/common/download?fileName=${res.msg}`; // 指定下载链接
            //     a.click(); //触发下载
            //     console.log(res,'--------->导出');
            // })
            this.$confirm("是否导出全部数据？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                    teachingPlanExportApi().then((res)=>{
                        console.log(res)
                        if (!res) return;
                        const blob = new Blob([res], {
                        type: "application/vnd.ms-excel",
                        }); // 构造一个blob对象来处理数据，并设置文件类型
                        if (window.navigator.msSaveOrOpenBlob) {
                        //兼容IE10
                        navigator.msSaveBlob(blob, this.filename);
                        } else {
                        const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
                        const a = document.createElement("a"); //创建a标签
                        a.style.display = "none";
                        a.href = href; // 指定下载链接
                        a.download = this.filename; //指定下载文件名
                        console.log(this.filename);
                        a.click(); //触发下载
                        URL.revokeObjectURL(a.href); //释放URL对象
                        }
                    })
                    // const a = document.createElement("a"); //创建a标签
                    // a.href = `${HOST}/common/download?fileName=${res.msg}`; // 指定下载链接
                    // a.click(); //触发下载
                })
                .catch(() => {});
        },

        // table选中事件
        selectionChange() {},

        // 分页事件
        handleSizeChange() {},
        handleCurrentChange() {
            this.getManageementList({pageSize:'10', pageNum:this.currentPage})
        },
    },
}
</script>

<style lang="scss" scoped>
.teacherPlanQuery{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
    background-color: rgb(242, 241, 246);
    display: flex;
    flex-direction: column;
      .TeachingPlanTop {
        min-width: 100vh;
        width: 100%;
        // height: 80px;
        display: flex;
        font-size: 14px;
        // justify-content: space-between;
        align-items: center;
        background: #fff;
        flex-wrap: wrap;
        border-radius: 10px;
        padding: 0 20px;
        box-shadow: 0px 4px 3px #ccc;

        .planName,
        .school,
        .major {
            display: flex;
            flex-wrap: nowrap;
            text-align: center;
            align-items: center;
            margin: 20px 0;
            width: 270px;
            p {
                text-align: right;
                width: 112px;
            }
            .el-input{
                width: 170px;
            }
        }
        .planName .planNameText{
            width: 70px;
        }
        .moreBtn {
        width: 300px;
        margin: 20px;
        display: flex;
        .searchBtn {
            color: white;
            border: none;
            background-color: rgb(123, 180, 208);
        }
        .refreshBtn {
            color: white;
            border: none;
            background-color: rgb(108, 207, 204);
        }
        }
    }
    .TeachingPlanBottom {
        width: 100%;
        flex: 1;
        background-color: white;
        padding: 0 20px;
        margin-top: 10px;
        border-radius: 10px;
        box-sizing: border-box;
        min-width: 100vh;
        // .infoTeachingPlanBottom {
        height: 100%;

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }



        .operationBtns {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            margin-top: 10px;
            justify-content: space-between;
            .setBtnsLeftTitle {
            width: 200px;
            font-size: 16px;
            font-weight: 600;
            color: rgb(57, 141, 220);
            p {
                width: 100px;
            }
            }
            .setBtns {
            width: 500px;
            display: flex;
            justify-content: right;
            button {
                border: none;
            }
            .newAdd {
                background-color: rgb(86, 164, 212);
            }
            .moreDelete {
                background-color: rgb(241, 129, 143);
            }
            .moreRelease {
                text-align: center;
                background-color: rgb(127, 162, 216);
                .shareImg {
                width: 15px;
                height: 15px;
                margin-top: -3px;
                background: #fff;
                }
                ::v-deep .el-icon-s-promotion {
                color: white;
                }
            }
            .importBtn{
                background-color: #66c8e3;
            }
            .exportBtn {
                background-color: #fabd90;
            }
            }

        }
        .selectDialog {
                border-radius: 10px;
                font-weight: 600;

                .selectClass {
                    width: 300px;
                    float: right;
                    margin-bottom: 10px;
                }

                ::v-deep .el-dialog {
                    border-radius: 10px;
                    height: 700px;
                }

                ::v-deep .el-dialog__header {
                    border-radius: 10px 10px 0 0;
                    text-align: center;
                    background-color: rgb(72, 149, 219);
                    .el-dialog__title {
                        color: #fff;
                    }
                    .el-dialog__headerbtn .el-dialog__close {
                        color: #fff;
                    }
                }
                ::v-deep .el-dialog .el-dialog__body {
                    height: 500px;
                    .el-table__header-wrapper .el-checkbox {
                        display: none;
                    }
                }
                .dialog-footer {
                    // height: 100%;
                    text-align: center;
                    button {
                        width: 100px;
                        height: 35px;
                        border-radius: 16px;
                        line-height: 0;
                    }
                    .cancel {
                        border: none;
                        color: #848383;
                        background-color: #f0f0f0;
                    }
                    .determine {
                        border: none;
                        background-color: #4995dc;
                    }
                }
            }
        // }
        .tableData {
            width: 100%;
            overflow-y: auto;
            .haed {
                cursor: pointer;
                align-items: center;
                color: rgb(135, 173, 218);
                .setPlan{
                margin-left: 10px;
                }
            }

            ::v-deep .el-table thead tr {
                background-color: #f2f8fb !important;
            }
            ::v-deep .el-table tr:nth-child(2n) {
                background-color: #f9f9f9;
            }
            .edit {
                width: 15px;
                height: 15px;
                margin-left: 10px;
                font-weight: bold;
            }
            .del {
                width: 15px;
                height: 15px;
                margin-left: 10px;
                font-weight: bold;
            }
            ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #86caf0;
                border-color: #86caf0;
            }

            ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #86caf0;
                border-color: #86caf0;
            }
            .el-icon-delete {
                color: red;
                font-weight: bold;
                margin-left: 15px;
                font-size: 18px;
            }
            .el-icon-edit-outline {
                font-size: 18px;
                font-weight: bold;
                color: rgb(142, 198, 216);
            }
            .share {
                margin-left: 15px;
            }
            ::v-deep .el-checkbox__input .is-checked .el-checkbox__inner {
                background: red !important;
            }
        }
    }
    .block {
        padding: 0 20px 0 0;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: right;
        background-color: #fff;

        ::v-deep .btn-prev {
        border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }

        ::v-deep .btn-next {
            border: solid 1px #e6e6e6;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-pager li {
            background: #fff;
            font-size: 13px;
            min-width: 30.5px;
            height: 28px;
            line-height: 28px;
            box-sizing: border-box;
        }

        ::v-deep .el-pager li.active {
            background-color: #4895db;
            color: #fff;
            cursor: default;
        }
        ::v-deep .number {
            border: solid 1px #e6e6e6;
            margin: 0 5px;
            border-radius: 5px;
            color: #6f6f6f;
        }
        ::v-deep .el-button {
            height: 28px;
            line-height: 0;
        }
        .sure {
            width: 50px;
            height: 30px;
            line-height: 0;
            text-align: center;
            padding: 0;
        }
    }
}
</style>